<script lang="ts" setup>
import type { TreeSelectProps } from 'ant-design-vue';

import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import {
  Col,
  Form,
  FormItem,
  Input,
  message,
  RadioButton,
  RadioGroup,
  Row,
  TreeSelect,
} from 'ant-design-vue';

import {
  getMenuInfoApi,
  getMenuPageApi,
  storeMenuApi,
  updateMenuApi,
} from '#/api';

const gridApi = ref();
const record = ref();
const formRef = ref();
const treeData = ref<TreeSelectProps['treeData']>([
  { id: 0, name: '顶级菜单', children: [] },
]);

const labelCol = { span: 6 };

const formData = reactive<any>({
  name: '',
  desc: '',
  pid: null,
  type: 1,
  icon: '',
  sort: 0,
  is_link: 0,
  path: '',
  is_show: 1,
  is_cache: 0,
  perms: '',
  component: '',
  status: 1,
  url: '',
});

// 验证规则
const rules = {
  type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
  name: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
  perms: [{ required: true, message: '请填写权限标识', trigger: 'blur' }],
};

const [Modal, modalApi] = useVbenModal({
  // 重置表单
  onBeforeClose() {
    formRef.value.resetFields();
  },
  // 取消按钮
  onCancel() {
    modalApi.close();
  },
  // 确认提交
  onConfirm() {
    // 表单验证
    formRef.value.validate().then(() => {
      modalApi.setState({ loading: true, confirmLoading: true });
      const data = formData;
      const id = record.value.id;
      const Api = id ? updateMenuApi(id, data) : storeMenuApi(data);
      Api.then(() => {
        message.success('操作成功');
        gridApi.value?.reload();
        modalApi.close();
      }).finally(() => {
        modalApi.setState({ loading: false, confirmLoading: false });
      });
    });
  },
  // 打开抽屉回调
  onOpenChange(isOpen: boolean) {
    record.value = isOpen ? modalApi.getData()?.record || {} : {};
    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
    formData.pid = isOpen ? modalApi.getData()?.pid : null;
    if (isOpen) {
      // 获取上级菜单列表
      getMenuPageApi().then((data) => {
        // 将后端数据追加到顶级菜单的子节点中
        treeData.value[0].children = data;
      });
      if (record.value.id && record.value) {
        getMenuInfoApi(record.value.id).then((data) => {
          Object.assign(formData, data);
        });
      }
    }
  },
});
</script>
<template>
  <Modal class="w-[1000px]">
    <Form
      ref="formRef"
      :label-col="labelCol"
      :model="formData"
      :rules="rules"
      layout="inline"
    >
      <Row :gutter="[16, 20]">
        <Col :span="12">
          <FormItem label="菜单类型" name="type">
            <RadioGroup v-model:value="formData.type">
              <RadioButton :value="1">菜单</RadioButton>
              <RadioButton :value="2">接口</RadioButton>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="上级菜单" name="pid">
            <TreeSelect
              v-model:value="formData.pid"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :field-names="{ label: 'name', value: 'id' }"
              :tree-data="treeData"
              placeholder="选择上级菜单"
              style="width: 100%"
              tree-default-expand-all
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="菜单名称" name="name">
            <Input v-model:value="formData.name" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="权限标识" name="perms">
            <Input v-model:value="formData.perms" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="路由地址" name="path">
            <Input v-model:value="formData.path" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="组件路径" name="component">
            <Input v-model:value="formData.component" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="图标" name="icon">
            <Input v-model:value="formData.icon" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="排序" name="sort">
            <Input v-model:value="formData.sort" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="外链地址" name="is_link">
            <Input v-model:value="formData.url" :disabled="!formData.is_link" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="开启外链" name="is_link">
            <RadioGroup v-model:value="formData.is_link" button-style="solid">
              <RadioButton :value="1">开启</RadioButton>
              <RadioButton :value="0">关闭</RadioButton>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="显示菜单" name="is_show">
            <RadioGroup v-model:value="formData.is_show" button-style="solid">
              <RadioButton :value="1">是</RadioButton>
              <RadioButton :value="0">否</RadioButton>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="缓存路由" name="is_cache">
            <RadioGroup v-model:value="formData.is_cache" button-style="solid">
              <RadioButton :value="1">是</RadioButton>
              <RadioButton :value="0">否</RadioButton>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="菜单状态" name="status">
            <RadioGroup v-model:value="formData.status" button-style="solid">
              <RadioButton :value="1">正常</RadioButton>
              <RadioButton :value="0">禁用</RadioButton>
            </RadioGroup>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </Modal>
</template>
